<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/9/18
  Time: 12:13
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en">
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5k8Rpa7Bi5HSNNuhjT0EqI6GvMfdQaxe"> </script>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>创建订单</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
        <script src="/static/js/jquery-3.2.1.min.js"></script>
    <!-- Template CSS -->
    <link rel="stylesheet" href="${path}/static/user/css/style-starter.css">
</head>
<body>
<header id="site-header" class="fixed-top">
    <section class="w3l-header-4">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <h1><a class="navbar-brand" href="${path}/user/index">
                    <span>跑腿平台</span>
                </a></h1>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="fa icon-expand fa-bars"></span>
                    <span class="fa icon-close fa-times"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-lg-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/index">首页 </a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="${path}/user/createTask">发起任务</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/historyOrders">我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/wallet">钱包</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/myAddress">地址管理</a>
                        </li>
                        <li class="nav-item" >
                            <a class="nav-link" href="${path}/user/reviewList">我的评价</a>
                        </li>
                        <li class="nav-item" onclick="logOut()"><a class="nav-link">退出登录</a> </li>
                    </ul>
                    <ul class="navbar-nav search-right mt-lg-0 mt-2">

                         <li class="nav-item"><a href="${path}/user/updateUserInfo"
                                                class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2"><span
                                class="fa fa-phone mr-3" aria-hidden="true"></span>  ${sessionScope.user.phone_number}</a>
                        </li>
                    </ul>

                    <!-- search popup -->
                    <div id="search" class="pop-overlay">
                        <div class="popup">
                            <form action="#" method="GET" class="d-sm-flex">
                                <input type="search" placeholder="Search.." name="search" required="required"
                                       autofocus>
                                <button type="submit">Search</button>
                                <a class="close" href="#url">&times;</a>
                            </form>
                        </div>
                    </div>
                    <!-- /search popup -->
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="mobile-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
            </nav>
        </div>
    </section>
</header>

<!-- about breadcrumb -->
<section class="w3l-about-breadcrumb text-left">
    <div class="breadcrumb-bg breadcrumb-bg-about py-3">
        <div class="container grid-breadcrumb">
            <ul class="breadcrumbs-custom-path mt-md-2">
                <li><a href="${path}/user/index">主页</a></li>
                <li class="active"><span class="fa fa-angle-double-right mx-2" aria-hidden="true"></span>发布任务
                </li>
            </ul>
        </div>
    </div>
</section>
<!-- contact1 -->
<section class="w3l-contact-11 py-5" id="contact">
    <div class="contacts-main py-lg-5 py-md-4">
        <div class="contant11-top-bg">
            <div class="container">
                <span class="subhny-title text-center mb-2">发布任务</span>
                <h3 class="hny-title text-center mb-md-5 mb-4">发布任务详情</h3>
                <div class="d-grid contact section-gap">
                    <div class="contact-info-left d-grid text-center">
                        <div class="contact-info">
                            <span class="fa fa-phone" aria-hidden="true"></span>
                            <h4>Phone</h4>
                            <p><a href="tel:+44 7834 857829">+86 ${sessionScope.user.phone_number}</a></p>

                        </div>
                        <div class="contact-info">
                            <span class="fa fa-envelope" aria-hidden="true"></span>
                            <h4>Email</h4>
                            <p><a href="mailto:mail@example.com" class="email">example@qq.com</a></p>
                            <p><a href="mailto:mail@example1.com" class="email">example@163.com</a></p>
                        </div>
                        <div class="contact-info">
                            <span class="fa fa-clock-o" aria-hidden="true"></span>
                            <h4>工作时间</h4>
                            <p>全年</p>
                            <p>无休</p>
                        </div>
                        <div class="contact-info">
                            <span class="fa fa-map-marker" aria-hidden="true"></span>
                            <h4>Location</h4>
                            <p>百度地图</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="form-41-mian mt-5 pt-lg-5 pt-md-4">
            <div class="container">

                <div class="form-inner-cont">
                    <form action="${path}/user/createTask" method="post">
                            <div class="form-input">
                                <label>送达地点</label>
                                <select id="address" name="useraddress.id">
                                    <option>--请选择--</option>
                                    <c:forEach items="${requestScope.userAddressList}" var="userAddress">
                                        <option data-cityid="${userAddress.city.id}" data-longitude="${userAddress.longitude}" data-latitude="${userAddress.latitude}"
                                                value="${userAddress.id}">${userAddress.address}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="form-input">
                                <label for="taskLocation">任务地点:*</label>
                                <input id="taskLocation" type="text" name="location" placeholder="" class="contact-input">
                                <input type="hidden" id="city" name="cityId">
                                <input type="hidden" id="LocationLat" name="latitude">
                                <input type="hidden" id="LocationLon" name="longitude">
                                <input type="hidden" id="distance" name="distance">
                            </div>
                            <div class="form-input">
                                <label>查询费用:</label>
                                <button type="button" class="btn btn-outline-primary btn-style mr-2"  onclick="searchLocation()">查询</button>
                            </div>
                            <div class="form-input">
                                <label for="reward">金额</label>
                                <input type="number" id="reward" name="reward" placeholder="" class="contact-input" readonly>
                            </div>
                        <div class="form-input">
                            <label for="taskDescription">任务描述</label>
                            <textarea placeholder="" name="description" id="taskDescription" required=""></textarea>
                        </div>
                        <div class="submit text-right">
                            <button type="submit" class="btn btn-primary btn-style">提交任务</button>
                        </div>
                    </form>


                </div>
                <div style="width:100%;height:300px;" id="mapDiv">
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /contact1 -->
<!-- footer-28 block -->
<jsp:include page="inc/footer.jsp"></jsp:include>

<script>
    // 初始化地图
    let map;
    function initMap() {
        map = new BMapGL.Map('mapDiv');
        map.centerAndZoom(new BMapGL.Point($("#address").find('opttion:selected').data("longitude"), $("#address").find('opttion:selected').data("latitude")), 16);
    }


    function searchLocation() {
        initMap();
        const myGeo = new BMapGL.Geocoder();
        const taskLocationInput = $("#taskLocation");
        const rewardInput = $("#reward");
        const selectedAddressOption = $("#address").find('option:selected');
        const addressLongitude = selectedAddressOption.data("longitude");
        const addressLatitude = selectedAddressOption.data("latitude");
        const cityID = selectedAddressOption.data("cityid");
        const addressToResolve = taskLocationInput.val();
        myGeo.getPoint(addressToResolve, function (resultPoint) {
            if (resultPoint) {
                $("#LocationLat").val(resultPoint.lat);
                $("#LocationLon").val(resultPoint.lng);
                const point2 = new BMapGL.Point(addressLongitude, addressLatitude);
                $("#city").val(cityID);
                const distance = map.getDistance(resultPoint, point2).toFixed(2);
                $("#distance").val((distance/1000).toFixed(2));
                let money=(distance / 1000 * 5).toFixed(2);
                if (money<10)
                    money=10
                rewardInput.val(money);
                map.centerAndZoom(resultPoint, 16);
                map.addOverlay(new BMapGL.Marker(resultPoint, { title: taskLocationInput.val()}));
            } else {
                const errorDiv = $("<div>").addClass("error-message").text("您选择的地址没有解析到结果！请重新输入。");
                $("#mapContainer").append(errorDiv);
            }
        }, '全国');
    }
</script>
<script>
    function rewardCreate() {
    }
</script>

</body>

</html>